<template>
	<view class="page-container">
		<!-- 自定义导航 -->
		<my-navigation ref="nav" from="postVideo" backColorOpacity="0" pos="fixed" @clickBack="back"></my-navigation>
		
		<view v-if="post.status!=1" class="row-box center pall-lg radius-l audit-box" :style="{top: navHeight+'px'}">
			<text :class="post.status==2?'red s32':'white s32'" style="min-width: 160rpx;text-align: center;">{{ post.status==2?`${statusArr[post.status]}：`:statusArr[post.status] }}</text>
			<text v-if="post.status==2" class="red" style="text-decoration: underline;">{{ post.messageContent }}</text>
		</view>
		
		<!-- 视频--占满全屏 -->
		<video
			id="video"
			class="video"
			:src="post.video"
			autoplay
			loop
			:controls="false"
			:object-fit="videoFitTpye"
			@error="videoErrorCallback"
			@pause="pause"
			@play="play"
			@click="stopPlay">
		</video>
		
		<!-- 播放按钮 -->
		<view class="row-box center radius-circle play-button" :class="videoStatus=='pause'?'show':''" @click="stopPlay()">
			<u-icon class="pause" name="play-right-fill" color="#ffffff" :size="videoStatus=='pause'?48:0"></u-icon>
		</view>
		
		<!-- 内容 -->
		<view class="col-box pcol-lg bottom-box left-box">
			<!-- 头像昵称 -->
			<view class="row-box mb-10">
				<u-avatar class="mr-base" style="height: 84rpx" size="84" :src="post.userIcon"></u-avatar>
				<text class="s32 bold white" style="line-height: 32rpx;">{{ post.userNickName }}</text>
			</view>
			<!-- 发布时间 -->
			<text class="s24 white">{{ post.ct }}</text>
			<!-- 文字内容 -->
			<my-expandable-text class="pcol-s" ref="expandable" :text="post.description" :fontSize="26" textColor="#ffffff" :maxLine="2" :expandColor="primaryColor"></my-expandable-text>
			<!-- 联系方式 -->
			<view v-if="post.contactNumber" class="row-box">
				<text class="s24 primary mr-10">{{ contactArr[post.contactId-1] }}</text>
				<text class="s24 primary">{{ post.contactNumber }}</text>
				<!-- <text class="s24 primary">复制</text> -->
				<image class="icon36 pall-base" src="../static/复制.png" @click="copyContact()"></image>
			</view>
			<view class="row-box pcol-base">
				<u-icon class="mr-base" name="map-fill" :color="primaryColor" :size="28"
					:label="post.schoolName?post.schoolName:'全部校区'" label-size="24" label-pos="right" :label-color="primaryColor" margin-left="4">
				</u-icon>
				<u-icon class="mr-base" name="tags-fill" :color="primaryColor" :size="28"
					:label="post.typeName" label-size="24" label-pos="right" :label-color="primaryColor" margin-left="4">
				</u-icon>
			</view>
		</view>
		<!-- 右侧 status状态( -1：查看全部，0:审核中，1:审核通过，2:审核拒绝) -->
		<view v-if="post.status==1" class="col-box center pcol-lg bottom-box right-box">
			<u-icon class="row-box center icon-item" :name="post.praiseStatus?'heart-fill':'heart'"  :color="post.praiseStatus?redColor:'#ffffff'" :size="48"
				:label="formatPraisesComments(post.praiseCount, 0)" label-size="28" label-pos="bottom" label-color="#ffffff" margin-top="10" @click="postPraise(post.id)">
			</u-icon>
			<u-icon class="row-box center icon-item" name="comment" custom-prefix="custom-icon" color="#ffffff" :size="48"
				:label="formatPraisesComments(comments.length, '评论')" label-size="28" label-pos="bottom" label-color="#ffffff" margin-top="10" @click="openCommentPop()">
			</u-icon>
			<button open-type="share" hover-class="none" class="row-box center" style="background: transparent;">
				<u-icon class="row-box center icon-item" name="share" custom-prefix="custom-icon" color="#ffffff" :size="48"
					label="分享" label-size="28" label-pos="bottom" label-color="#ffffff" margin-top="10">
				</u-icon>
			</button>
			<text class="white pcol-s" style="display: block;" @click="goReport(post.id, 3, post.description)">举报</text>
		</view>
		
		<!-- 评论区弹窗 -->
		<u-popup v-model="showComment" mode="bottom" border-radius="20" height="70%">
			<view class="comment-pop-content back-white">
				<view class="head-box row-box back-white sb">
					<text class="bold pall-base" style="width: 100%;" @click="cancelInput()">评论回复</text>
					<u-icon name="close" color="#333333" :size="32" :bold="true" class="pall-base" @click="showComment=false"></u-icon>
				</view>
				<view class="prow-l" style="height: 100%;" @click.stop="cancelInput()">
					<view v-for="(item, index) in comments" :key="index" class="row-box start comment-box">
						<u-avatar class="mr-l pcol-lg" style="height: 72rpx" :size="72" :src="item.userIcon"></u-avatar>
						<view class="pcol-lg content" :class="index?'border-top':''" style="width: 100%;">
							<view class="row-box sb mb-10" @click.stop="addReplyHandle(index)">
								<text class="grey-light">{{ item.userNickName?item.userNickName:'匿名' }}</text>
								<text class="s24 grey-light">{{ item.ct }}</text>
							</view>
							<view class="comment" @click.stop="addReplyHandle(index)">
								<text>{{ item.content }}</text>
								<!-- <view class="row-box sb">
									<u-icon class="row-box center icon-item" style="height: 40rpx;" :name="item.praiseStatus?'heart-fill':'heart'"  :color="item.praiseStatus?redColor:'#999999'" :size="30"
										:label="formatPraisesComments(item.praiseCount, 0)" label-size="24" label-pos="right" label-color="#999999" margin-left="10" @click="commentPraise(item.id)">
									</u-icon>
									<text class="s24 grey-light" style="text-align: center;" @click.stop="">举报</text>
								</view> -->
							</view>
							<view v-if="item.replyCount" class="col-box">
								<view v-if="item.showReply" class="reply" @click.stop="addReplyHandle(index)">
									<view v-for="(item2, index2) in item.replyList" :key="index2" class="row-box start comment-box" style="padding-top: 8rpx;padding-bottom: 0;">
										<u-avatar class="mr-l pcol-s" :style="{height: 48+'rpx'}" :size="48" :src="item2.replyUserIcon"></u-avatar>
										<view class="pcol-s content" style="width: 100%;">
											<view class="row-box sb mb-10">
												<text class="grey-light">{{ item2.replyUserNickName?item2.replyUserNickName:'匿名' }}</text>
												<text class="s24 grey-light">{{ item2.ct }}</text>
											</view>
											<view class="comment">
												<text>{{ item2.content }}</text>
												<!-- <view class="row-box sb">
													<u-icon class="row-box center icon-item" style="height: 40rpx;" :name="item2.praiseStatus?'heart-fill':'heart'"  :color="item2.praiseStatus?redColor:'#999999'" :size="30"
														:label="formatPraisesComments(item2.praiseCount, 0)" label-size="24" label-pos="right" label-color="#999999" margin-left="10" @click="commentPraise(item2.id)">
													</u-icon>
													<text class="s24 grey-light" style="text-align: center;" @click.stop="">举报</text>
												</view> -->
											</view>
										</view>
									</view>
								</view>
								<view class="pcol-s">
									<u-icon v-if="!item.showReply" name="arrow-down" color="#999" :size="24" label-pos="left" :bold="true"
										:label="`展开${item.replyCount}条回复`" label-size="24" label-color="#999" margin-right="10" @click.stop="showReply(index)">
									</u-icon>
									<u-icon v-else-if="item.replyList.length < item.replyCount"  name="arrow-down" color="#999" :size="24" label-pos="left" :bold="true"
										label="展开更多" label-size="24" label-color="#999" margin-right="10" @click.stop="getPostReplyList(item, 1)">
									</u-icon>
									<u-icon v-else name="arrow-up" color="#999" :size="24" label-pos="left" :bold="true"
										label="收起回复" label-size="24" label-color="#999" margin-right="10" @click.stop="showReply(index)">
									</u-icon>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="loadStatus" />
				</view>
				<!-- 底部输入框 -->
				<view class="prow-l pcol-lg back-white input-box" :style="{bottom: keyboardHeight+'px'}">
					<view class="row-box">
						<view v-if="!showInput" class="row-box prow-l back-grey edit-button" @click="addCommentHandle()">
							<u-icon name="edit-pen" color="#999999" :size="32"
								label='说点什么...' label-size="28" label-pos="right" label-color="#999999" margin-left="10">
							</u-icon>
						</view>
						<textarea v-else class="back-grey radius-base input" :class="keyboardHeight?'expand':''" type="text" v-model="content" placeholder="说点什么..." placeholder-class="placeholder"
							:fixed="true" :auto-height="false" :show-confirm-bar="false" :adjust-position="false" :cursor-spacing="20" @focus="focus" @blur="blur"
						></textarea>
						<view class="send-button" @click="sendHandle()">发送</view>
					</view>
					<view v-if="openStatus" class="row-box sb mt-base" style="flex-direction: row-reverse;">
						<view class="row-box" @click="anonymousTip(post.isRealnameComment)">
							<text class="mr-base">匿名</text>
							<u-switch v-model="anonymous" :disabled="post.isRealnameComment || !isAuthent" :active-color="primaryColor" size="40"></u-switch>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import mixinPost from "@/common/mixin_post.js"
	import { mapState,mapMutations } from "vuex"
	export default {
		mixins: [mixinPost], // 混入动态通用
		data() {
			return {
				navHeight: 0, // 导航高度
				windowHeight: 0, // 窗口可用高度
				keyboardHeight: 0, //键盘高度
				showInput: false, // 是否展示底部输入框
				type: 0, // 0评论 1回复
				commentIndex: null, // 当前回复的评论对象index
				content: '', // 输入内容
				anonymous: false, // 是否匿名
				
				id: null, // 动态id
				post: {}, // 动态对象
				contactArr: [ '微信', 'QQ', '手机' ],
				showComment: false, // 是否展示评论区弹窗
				comments: [], // 评论列表
				pageIndex: 1,
				pageCount: 0,
				pageSize: 10,
				loadStatus: 'loadmore',  // 加载状态
				
				videoStatus: '', // 视频播放状态
				
				statusArr: [ '审核中', '审核通过', '审核拒绝'], // 状态数组
			};
		},
		computed: {
			...mapState('m_user', ['userId', 'isAuthent', 'openStatus']),
			
			videoFitTpye() {
				if (!this.post.width) return 'contain'
				if (this.post.width > this.post.height) {
					return 'cover'
				} else if (this.post.width < this.post.height) {
					return 'contain'
				}
			}
		},
		watch: {
			post(newValue, oldValue) {
				if (newValue.description) {
					this.$refs.expandable.init()
				}
			}
		},
		// 定义局部分享
		// 1.发送给朋友
		onShareAppMessage(res) {
		  return {
				title: this.post.description,
				path: this.getCurrentPath(),
				imageUrl: this.post.coverImage,
			}
		},
		// 2.分享到朋友圈
		onShareTimeline(res) {
			return {
				title: this.post.description,
				path: this.getCurrentPath(),
				imageUrl: this.post.coverImage,
			}
		},
		onLoad(options) {
			this.windowHeight = uni.getSystemInfoSync().windowHeight
			this.navHeight = this.$refs.nav.navHeight
			this.id = Number(options.id)
			// 获取动态详情
			this.getPostDetail()
			// 获取动态评论列表
			this.getPostCommentList(0)
		},
		methods: {
			...mapMutations('m_user', ['updateBackPraise']),
			
			// 点击左上角返回
			back() {
				uni.navigateBack()
			},
			
			// 复制联系方式
			copyContact() {
				uni.setClipboardData({
					data: this.post.contactNumber,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '复制成功！'
						})
					}
				});
			},
			
			// 点击底部评论框
			addCommentHandle() {
				this.type = 0
				this.showInput = true
			},
			
			// 点击回复
			addReplyHandle(index) {
				this.type = 1
				this.showInput = true
				this.commentIndex = index
			},
			
			// 取消输入
			cancelInput() {
				this.showInput = false
				this.keyboardHeight = 0
			},
			
			// 点击发送
			sendHandle() {
				if (this.type == 0) {
					this.addPostComment()
				} else {
					this.addPostReply()
				}
			},
			
			// 视频播放出错时触发
			videoErrorCallback(e) {
				console.log(e)
			},
			// 视频暂停触发
			pause(e) {
				console.log(e)
				this.videoStatus = 'pause'
			},
			// 视频播放触发
			play(e) {
				console.log(e)
				this.videoStatus = 'play'
			},
			// 点击视频
			stopPlay() {
				this.videoContext = uni.createVideoContext('video') //创建视频实例指向video
				if (this.videoStatus == 'play') {
					this.videoContext.pause() //暂停
					this.videoStatus = 'pause'
				} else {
					this.videoContext.play() //暂停
					this.videoStatus = 'play'
				}
			},
			
			// 打开评论区
			openCommentPop() {
				this.showComment = true
			},
			
			// 输入框聚焦
			focus(e) {
				console.log('focus', e)
				// 微信小程序支持
				if (this.keyboardHeight) return
				this.keyboardHeight = e.detail.height
			},
			// 输入框失焦
			blur(e) {
				console.log('blur', e)
				this.keyboardHeight = 0
			}
		},
	}
</script>

<style lang="scss">
.page-container {
	height: 100vh;
	overflow: hidden;
	
	// 审核盒子
	.audit-box {
		position: fixed;
		left: 8%;
		z-index: 99;
		width: 84%;
		background: rgba(0, 0, 0, 0.3);
	}
	
	// 视频
	.video {
		width: 100%;
		height: 100%;
	}
	// 播放按钮
	.play-button {
		width: 96rpx;
		height: 96rpx;
		background: rgba(0, 0, 0, 0.3);
		opacity: 0;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
		transition: all 0.1s;
		.pause {
			transition: all 0.3s;
		}
		&.show {
			opacity: 1;
		}
	}
	// 内容区域
	.bottom-box {
		position: fixed;
		bottom: 40rpx;
	}
	.left-box {
		width: 528rpx;
		left: 32rpx;
		// 地址盒子
		.pos-box {
			width: fit-content;
			height: 48rpx;
			border-radius: 24rpx;
			background: rgba(0, 0, 0, 0.3);
		}
	}
	.right-box {
		width: 124rpx;
		right: 32rpx;
		// 关注图标
		.focus-button {
			width: 124rpx;
			height: 44rpx;
			border-radius: 22rpx;
			text-align: center;
			line-height: 44rpx;
			color: $uni-text-color-inverse;
			position: relative;
			left: 0;
			bottom: 20rpx;
		}
		// 图标项
		.icon-item {
			height: 120rpx;
		}
	}
	
	// 评论区弹窗
	.comment-pop-content {
		height: 100%;
		box-sizing: border-box;
		padding-bottom: 182rpx;
		
		// 头部区域 标题和关闭
		.head-box {
			width: 100vw;
			// position: fixed;
			// top: 0;
			// left: 0;
			// z-index: 999;
		}
		
		// 评论盒子
		.comment-box {
			
			.content {
				&.border-top {
					border-top: 1rpx solid #f2f2f2;
				}
			}
			
			.comment {
				display: grid;
				align-items: flex-end;
				grid-template-columns: 1fr 140rpx;
				column-gap: 20rpx;
			}
		}
		
		// 底部输入框
		.input-box {
			position: fixed;
			left: 0;
			z-index: 999;
			width: 100%;
			padding: 24rpx;
			border-top: 1rpx solid #eee;
			// 编辑按钮
			.edit-button {
				width: 100%;
				height: 68rpx;
				border-radius: 34rpx;
			}
			.input {
				width: 100%;
				// &.expand {
					min-height: 104rpx;
					max-height: 164rpx;
				// }
			}
			.send-button {
				margin-left: $uni-spacing-col-lg;
				width: 140rpx;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 16rpx;
				color: $uni-text-color-inverse;
				background: $uni-color-primary;
			}
		}
	}
}
</style>
